<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-23 09:04:43
 * @FilePath: /debug/src/views/operation/project-add.vue
 * @Description: 
-->
<template>
	<div class="project-add">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/operation/project' }">应用管理</el-breadcrumb-item>
        <el-breadcrumb-item>创建应用</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
		<div class="main">
      <div>
        <p>应用名称</p>
        <el-input v-model="form.name" placeholder="请输入应用名称" />
      </div>
      <br>
      <div>
        <p>应用类型</p>
        <el-select v-model="form.type" placeholder="请选择应用类型">
          <el-option label="Vuejs" value="Vuejs" />
          <el-option label="Reactjs" value="Reactjs" />
        </el-select>
      </div>
      <br>
      <div>
        <p>手机号码</p>
        <el-input v-model="form.mobile" placeholder="请输入手机号码" />
      </div>
      <br>
      <div>
        <p>电子邮箱</p>
        <el-input v-model="form.email" placeholder="请输入电子邮箱" />
      </div>
      <br>
      <div style="text-align:right;">
        <el-button type="primary" @click="onSubmit">创建</el-button>
      </div>
    </div>
	</div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import httpReq from '@/request'

import useStore from '@/store/index'

const store = useStore()
const router = useRouter()

const userVO = store.userVO


const form = reactive({
  name: '',
  type: '',
  mobile: '',
  email: ''
})


const onSubmit = async () => {
	const params = {
		owner: userVO.userName,
    name: form.name,
    type: form.type,
    projectMobile: form.mobile,
    projectEmail: form.email
	}
	const res = await httpReq.post('http://localhost:8092/project/add', params)

	router.back()
}
</script>

<style lang="scss" scoped>
.nav {
  padding: 20px 10px;
}
.main {
  margin: 0 auto;
  max-width: 900px;
  p {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
  }
  .label {
    font-size: 14px;
    color: #606266;
  }
}
</style>
  